<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<base href="${pageContext.request.contextPath}/">
	<link href="bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<%--bootstrap-table核心css--%>
	<link rel="stylesheet" type="text/css" href="bootstrap-table/bootstrap-table.min.css">
	<%--bootstrap-datetimepicker核心css--%>
	<link rel="stylesheet" type="text/css" href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">

</head>
<body>
<!-- 创建用户的模态窗口 -->
<div class="modal fade" id="createUserModal" role="dialog">
	<div class="modal-dialog" role="document" style="width: 50%;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">×</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">新增字典值</h4>
			</div>
			<div class="modal-body">

				<form class="form-horizontal" role="form" id="create-from">

					<div class="form-group">
						<label class="col-sm-2 control-label">字典类型<span style="font-size: 15px; color: red;">*</span></label>
						<div class="col-sm-10" >
                            <select id="create-typeCode" class="form-control typeCodeSelect" ></select>
							<sapn id="zh_span" style="color: red"></sapn>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">字典值<span style="font-size: 15px; color: red;">*</span></label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="create-value">
							<span style="color: red" id="value_span"></span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">文本<span style="font-size: 15px; color: red;">*</span></label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="create-text">
							<span style="color: red" id="text_span"></span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">排序号</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="create-orderNo">
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" onclick="save()">保存</button>
			</div>
		</div>
	</div>
</div>

<%--修改用户的模态窗口--%>
<div class="modal fade" id="editUserModal" role="dialog">
	<div class="modal-dialog" role="document" style="width: 90%;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">×</span>
				</button>
				<h4 class="modal-title" id="editModalLabel">编辑字典值</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" role="form" id="edit-from">
					<input type="hidden" id="edit-id">
					<div class="form-group">
						<label class="col-sm-2 control-label">字典类型<span style="font-size: 15px; color: red;">*</span></label>
						<div class="col-sm-10" style="width: 300px;">
                            <select id="edit-typeCode" class="form-control typeCodeSelect" ></select>
							<sapn id="editzh_span" style="color: red"></sapn>
						</div>
						<label class="col-sm-2 control-label">字典值</label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control" id="edit-value" readonly>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">文本</label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control" id="edit-text">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">排序号</label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control" id="edit-orderNo">
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" onclick="edit()">保存</button>
			</div>
		</div>
	</div>
</div>

<%--页面导航--%>
<div>
	<ol class="breadcrumb">
		<li><a href="#">首页</a></li>
		<li><a href="#">权限管理</a></li>
		<li class="active">字典类型列表</li>
	</ol>
</div>

<%--表格部分--%>
<div class="panel-body">
	<form id="searchForm" class="form-inline">
		<div class="form-group">
			<label>字典类型</label>
			<select id="typeCode" class="form-control typeCodeSelect" ></select>
		</div>
		<div class="form-group">
			<button type="button" class="btn btn-primary" onclick="$('#tab').bootstrapTable('refresh');">
				<span class="glyphicon glyphicon-search"></span>&ensp;搜索</button>
			<button type="button" class="btn btn-primary" onclick="$('#searchForm')[0].reset();$('#tab').bootstrapTable('refresh');">
				<span class="glyphicon glyphicon-calendar"></span>&ensp;清空</button>
		</div>
		<div class="form-group">
			<button type="button" class="btn btn-primary " onclick="$('#createUserModal').modal('show');">
				<span class="glyphicon glyphicon-plus"></span>&ensp;新增</button>
			<button type="button" class="btn btn-danger" onclick="removeBatch()">
				<span class="glyphicon glyphicon-trash"></span>&ensp;批量删除</button>
		</div>
	</form>
	<table id="tab" class="table table-hover table-striped table-bordered"></table>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<%--bootstrap-table核心js--%>
<script type="text/javascript" src="bootstrap-table/bootstrap-table.min.js"></script>
<%--bootstrap-table中文语言包--%>
<script type="text/javascript" src="bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<%--bootstrap-datetimepicker核心js--%>
<script type="text/javascript" src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<%--bootstrap-datetimepicker中文语言包--%>
<script type="text/javascript" src="bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

</body>
<script type="text/javascript">
	//页面加载函数
	$(function () {
		//初始化表格
		initTable();
		//初始化下拉列表
		initSelect();
		//新增模态框隐藏时触发一个事件
		$('#createUserModal').on('hidden.bs.modal',function () {
			$('#create-from')[0].reset();
		});
        //修改模态框隐藏时触发一个事件
        $('#editUserModal').on('hidden.bs.modal',function () {
            $('#edit-from')[0].reset();
        });
	});

	<%--初始化表格--%>
	function initTable() {
		//调用配置异步表格方法
		$('#tab').bootstrapTable({
			//表格配置项
			//表格高度
			/*height:500,*/
			//本地数据
			/*data:[
				{'id':1001,'name':'张三','age':30},
				{'id':1002,'name':'李四','age':32},
				{'id':1003,'name':'王五','age':33},
				{'id':1004,'name':'赵六','age':34},
				{'id':1005,'name':'马奇','age':35},
				{'id':1006,'name':'纪八','age':36},
			],*/
			//http请求方式
			method:'get',
			//请求路径
			url:'dictionary/value/page',
			//开启分页
			pagination:true,
			//设置分页的位置，server服务端分页，local前端分页
			sidePagination: 'server',
			//设置每页条数
			pageSize:10,
			//设置每页条数列表
			pageList:[10,20,50],
			paginationPreText: '上一页',
			paginationNextText: '下一页',
			//设置发送参数的格式‘’表示发送参数名字为pageNumber(起始偏移量)        pageSize(每页条数)
			// 不设置这个默认发的是offset(起始偏移量)  跟limit(每页条数)
			queryParamsType: '',
			//查询时的参数
			queryParams:function (params) {
				console.log(params+"sadasdadasda");
				//获取自定义的请求参数
				params.typeCode=$('#typeCode').val();
				return params
			},
			//处理响应的格式
			responseHandler:function (res) {
				if (res.code == 0){
					/**
					 * 如果开启分页
					 * bootstrap-table中分页要求的数据格式为
					 * {
					 *     rows:[],     //当前页列表数据
					 *     total:100    //总记录数
					 * }
					 */
					// return res.data;
					return{
						rows: res.data.list,
						total:res.data.total
					}

				}
			},
			//点击选中
			chickToSelect:true,
			//单选
			singleSelect:false,
			//工具栏
			toolar:'#searchForm',
			//辅助功能
			showRefresh: true,
			showToggle: true,
			showFullscreen: true,
			//表格中的列描述
			columns:[
				{
					//复选框
					checkbox:true
				},{
					field:'id',
					//隐藏
					visible:false
				},{
					title:'字典值',
					field:'value',
					halign:'center',
					align: 'center'
				},{
					//列名
					title:'文本',
					//列数据:数据从数据对象获取
					field:'text',
					//表头对齐方法
					halign:'center',
					//值居中
					align: 'center'
				},{
					//列名
					title:'排序号',
					//列数据:数据从数据对象获取
					field:'orderNo',
					//表头对齐方法
					halign:'center',
					//值居中
					align: 'center'
				},{
					//列名
					title:'类型编码',
					//列数据:数据从数据对象获取
					field:'typeCode',
					//表头对齐方法
					halign:'center',
					//值居中
					align: 'center'
				},{
					//列名
					title:'类型名称',
					//列数据:数据从数据对象获取
					field:'typeName',
					//表头对齐方法
					halign:'center',
					//值居中
					align: 'center'
				},{
					//列名
					title:'操作',
					//表头对齐方法
					halign:'center',
					//数据对齐方法
					align:'center',
					//row表示一行内所有的数据
					formatter:function (value,row) {
						return '<button type="button" class="btn btn-warning btn-xs" onclick="openEdit(\''+row.id+'\')">编辑</button>&emsp;'+
								'<button type="button" class="btn btn-danger btn-xs" onclick="remove(\''+row.id+'\')">删除</button>&emsp;';
					}
				}
			]
		});
	}

	//初始化关联数据下拉列表
		function initSelect() {
			$.ajax('dictype/list',{
				type:'get',
				success:function (res) {
				if (res.code == 0){
					var str = '<option value=""></option>';
					$.each(res.data,function () {
						str += '<option value="'+this.code+'">'+this.name+'</option>';
					});
					$('.typeCodeSelect').html(str)
				}
			}
		});
	}

	//新增
	function save(){
		$.ajax('dictionary/value/add',{
			type: 'post',
			//设置发送请求的格式
			contentType:'application/json',
			//对象转json
			data:JSON.stringify({
				value:$('#create-value').val(),
				text:$('#create-text').val(),
				orderNo:$('#create-orderNo').val(),
				typeCode:$('#create-typeCode').val(),
			}),
            //验证字段非空
			beforeSend:function () {
				var value = $('#create-value').val();
				var text = $('#create-text').val();
                var typeCode = $('#create-typeCode').val();
				//js中的变量可放在if判断中，如果变量值为null/空字符串/undefined/0/NaN判断结果返回false
				if (!value){
					alert("字典值不能为空");
					return false;
				}
				if (!text){
					alert("文本不能为空");
					return false;
				}
				if (!typeCode){
					alert("字典类型不能为空");
					return false;
				}
			},
			//接收响应
			success:function (res){
				if (res.code == 0){
					alert('新增成功');
					//刷新表格
					$('#tab').bootstrapTable('refresh');
					//隐藏模态框
					$('#createUserModal').modal('hide');
				}else {
					alert(res.message);
				}
			}
		});
	}

	//打开修改
	function openEdit(id){
		alert(id);
		$.ajax('dictionary/value/find/'+id,{
			type:'get',
			success:function (res) {
				if (res.code == 0){
                    $('#edit-id').val(res.data.id),
                    $('#edit-value').val(res.data.value),
                    $('#edit-text').val(res.data.text),
                    $('#edit-typeCode').val(res.data.typeCode),
                    $('#edit-orderNo').val(res.data.orderNo),
					$('#editUserModal').modal('show');
				}
			}
		});
	}

	//修改
	function edit(){
		//数据校验

		$.ajax('dictionary/value/edit',{
			type: 'put',
			//设置发送请求的格式
			contentType:'application/json',
			//对象转json
			data:JSON.stringify({
                id:$('#edit-id').val(),
				value:$('#edit-value').val(),
				text:$('#edit-text').val(),
				typeCode:$('#edit-typeCode').val(),
				orderNo:$('#edit-orderNo').val(),
			}),
			beforeSend:function () {
                var value = $('#edit-value').val();
                var text = $('#edit-text').val();
                var typeCode = $('#edit-typeCode').val();
                //js中的变量可放在if判断中，如果变量值为null/空字符串/undefined/0/NaN判断结果返回false
                if (!value){
                    alert("字典值不能为空");
                    return false;
                }
                if (!text){
                    alert("文本不能为空");
                    return false;
                }
                if (!typeCode){
                    alert("字典类型不能为空");
                    return false;
                }
			},
			//接收响应
			success:function (res){
				if (res.code == 0){
					alert('修改成功');
					//刷新表格
					$('#tab').bootstrapTable('refresh');
					//隐藏模态框
					$('#editUserModal').modal('hide');
				}else {
					alert(res.message);
				}
			}
		});
	}

	//删除
	function remove(id) {
		if (confirm('确定要删除该条数据吗？')){
			$.ajax('dictionary/value/delete',{
				type:'post',
				data:{
					_method:'delete',
					id:id
				},
				success:function (res) {
					if (res.code == 0){
						alert('删除成功');
						//刷新表格
						$('#tab').bootstrapTable('refresh');
					}else {
						alert(res.message);
					}
				}
			});
		}
	}

	//批量删除
	function removeBatch() {
		//获取用户的选择
		var rows = $('#tab').bootstrapTable("getSelections");
		if (rows.length == 0){
			alert('请选择要删除的数据');
		}else {
			//如果用户点的取消 取反  结束方法
			if (!confirm('确定要删除该条数据吗?')){
				return;
			}
			//定义一个空的数组存储id
			var ids = [];
			$.each(rows,function () {
				//循环取出用户选择的id存入数组
				ids.push(this.id);
			});
			console.log(ids);
			$.ajax('dictionary/value/removes',{
				// type:'delete',   delete请求 在ajax中无法携带参数
				type:'post',
				data:{
					'_method':'delete',
					//拼接起来 把数组中所有的元素拼接起来用逗号间隔
					ids:ids.join()
				},
				success:function (res) {
					if(res.code == 0){
						alert('删除成功');
						//刷新表格
						$('#tab').bootstrapTable('refresh');
					}else {
						alert(res.message);
					}
				}
			});
		}
	}

</script>
</html>